<template>
<div class="header">
    <p class="title">待办事项</p>
    <input type="text" 
    placeholder="请输入任务" 
    class="new-todo" 
    v-model="name" 
    @keyup.enter="enterName"
    />
</div>
</template>
<script setup>
import { ref } from 'vue';

const emit=defineEmits(["addToDo"]);
const name=ref("")
function enterName(){
    if(!name.value || !name.value.trim())return;
emit("addToDo",name.value);
name.value="";
}
</script>
<style scoped>
.header{
    box-shadow: 0px 10px 10px 0 #ff3131;
}
.title{
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: greenyellow;
}
.new-todo{
    width: 100%;
    height: 25px;
    box-shadow: inset 0px 2px 1px #2a63ff;
    padding: 6px 18px;
    font-size: 20px;
}
</style>